<template>
  <div class="head">
    <h1>鞋子卖场</h1>
    <div class="btn">
      <ul>
        <li v-for="item in tablist" :key="item.id" :class="[item.type === type ? 'on' : '']"
          @click="changFoot(item.type)">{{ item.tab }}</li>
      </ul>
    </div>
  </div>
  <Footwear ref="Foot" :obj="list.length === 0 ? listall : list">
  </Footwear>
</template>

<script setup>
import { defineAsyncComponent, ref, provide } from "vue"
const Footwear = defineAsyncComponent(() => import("./components/Footwear.vue"))

let type = ref(0)
let tablist = ref([
  {
    id: 1,
    tab: "全部商品",
    type: 0,
  },
  {
    id: 2,
    tab: "男鞋",
    type: 1,
  }, {
    id: 3,
    tab: "女鞋",
    type: 2,
  },
])
let list = ref([])
let listall = ref([
  {
    id: 1,
    type: 1,
    img: 'https://g-search1.alicdn.com/img/bao/uploaded/i4/imgextra/i1/106798869/O1CN01fjhgx32FO3Pf7PllF_!!0-saturn_solar.jpg',
    content: '欧洲站潮牌男鞋百搭新款',
    price: '278',
  },
  {
    id: 2,
    type: 1,
    img: 'https://img.alicdn.com/imgextra/i3/725951136/TB2I9TomQ7mBKNjSZFyXXbydFXa_!!725951136.jpg',
    content: '回力男鞋帆布鞋低帮网球',
    price: '79',
  }, {
    id: 3,
    type: 1,
    img: 'https://img.alicdn.com/imgextra/https://img.alicdn.com/imgextra/i3/92688455/O1CN012kTige2CKRUgvB3zk_!!92688455.jpg',
    content: '李宁跑步鞋男网面透气男',
    price: '278',
  }, {
    id: 4,
    type: 2,
    img: 'https://gd2.alicdn.com/imgextra/i2/0/O1CN016l0koq1INXhYcmHWe_!!0-item_pic.jpg',
    content: '【王小毒】星河灿烂●芭',
    price: '289',
  }, {
    id: 5,
    type: 2,
    img: 'https://gd2.alicdn.com/imgextra/i3/1900994914/O1CN01vAp9Rm1mAesfPFQ4o_!!1900994914-0-lubanu-s.jpg',
    content: '尖头高跟鞋女细跟2022年',
    price: '148',
  }, {
    id: 6,
    type: 2,
    img: 'https://gd4.alicdn.com/imgextra/i2/1658155406/O1CN01EmNOhC1pnzmg6lwqm_!!1658155406.jpg',
    content: '漆皮黑色高跟鞋时尚浅口',
    price: '179',
  },
])

let changFoot = val => {
  // console.log(this);
  type.value = val
  if (val === 0) {
    list.value = listall.value
    // console.log('list', list.value);
    return
  }
  list.value = listall.value.filter(item => item.type === val)
  // console.log('list', list.value);
}
let modifyP = (price, id) => {
  // console.log('adsfasdf', price, id);
  listall.value[id - 1].price = price

}
provide('modifyP', modifyP)
</script>

<style lang="less">
.head {
  display: flex;
  width: 1200px;
  margin: 0 auto;
  // border: 1px solid #000;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;

  h1 {
    color: #b6b8ba;
  }

  .btn ul {
    display: flex;
    padding: 0;
    list-style: none;

    li {
      font-size: 16px;
      margin: 10px;
    }

    li:hover,
    li.on {
      color: red;
    }
  }
}
</style>
